<template>
	<div class="css-text">
		<h2>transform css类</h2>
		<div class="fo-Gray mt10 rota-20">一些transform相关的css类封装</div>
		
		<h4 class="mt40">旋转(rotate)</h4>
		<codeBox :list='list1'></codeBox>
		
		<h4 class="mt40">display</h4>
		<codeBox :list='list2'></codeBox>
		
		<h4 class="mt40">overflow</h4>
		<codeBox :list='list3'></codeBox>
		
		<h4 class="mt40">悬浮标记</h4>
		<codeBox :list='list4'></codeBox>
	</div>
</template>

<script>
	import codeBox from '@/views/components/codeBox.vue'
	export default {
		components:{
			codeBox
		},
		data() {
			return {
				list1: [
					{cssGroup: "float: left;",class: "flo-lef"},
					{cssGroup: "float: right;",class: "flo-rig"}
				],
				list2:[
					{cssGroup: "display: inline-block;",class: "inl-blo"},
					{cssGroup: "display: block;",class: "block"},
					{cssGroup: "display: inline;",class: "inline"},
					{cssGroup: "display: none;",class: "none"}
				],
				list3:[
					{cssGroup: "overflow: hidden;",class: "ove-hid"},
					{cssGroup: "overflow: scroll;",class: "ove-sco"},
					{cssGroup: "overflow: auto;",class: "ove-aut"},
					{cssGroup: "overflow: inherit;",class: "ove-inh"}
				],
				list4:[
					{cssGroup: "cursor: pointer;",class: "cur-poi"}
				]
			}
		}
	}
</script>

<style lang="less" scoped>
	.codeBox {
		padding:10px 20px;
		width: 1000px;
		max-height: 300px;
		overflow: scroll;
		border-radius: 10px;
		font-size: 14px;
		background: #2B2B2B;

		&::-webkit-scrollbar {
			width: 0px;
		}

		&::-webkit-scrollbar-thumb {
			background: skyblue;
			border-radius: 20px;
		}
	}
</style>
